الفصل العشرون 
البرمجۂ النصۂ لے H۲1۶‏ 


يحدد بروتوكول نقل النصوص التشعبية Hypertext Transfer Protocol (H1?)‏ کف تطلب 
مستعرضات الإنترنت المستندات من ملقمات الويب وكيف ترسل متويات النماذج إلى هذه الملقمات 
وكيف تستجيب ملقمات الويب لطلبات وعمليات الإرسال هذه. من الواضح أن مستعرضات 
الإنترنت تتعامل مع الکثیر من 1۲۳۶. لكن هذا عادة ما يكون خارج نطاق سيطرة البرامج 
النصية فهو يبحدث عندما ينقر المستخدم على ارتباط أو يدخل نموذج. من الممكن» ولكن ليس داثماء 
أن تقوم مەه ببرجة 1۲۲۴ نصيا. 

بمکن بدء طلبات 1۲١۲‏ عندما يضبط برنامج نصي الخاصية «٥ناهءه1‏ للغرض «4٠#‏ أو يستدعي 
الطريقة ۲0ن«طںء للغرض .۴٠۲۳٣‏ وقي كلا الحالتين e O E‏ 
فوق أي برنامج نصي يعمل فيها. يمكن لہذا النوع من برجة 11۲۴ أن يكون مفيدا في صفحات الويب 
متعددة الأطر لكنه ليس موضوع هذا الفصل. ندرس هنا كيف يكن لکود JavaScript‏ الاتصال مع ملقم 
الويب دون جعل مستعرض الإنترنت يعيد تحميل الصفحة المعروضة حاليا. 

تملك العلامات <عصن> و <عمصهءڳذ> و <امنءء> الخاصيات ٤ء‏ وعندما يضبط برنامج نصي هذه 
الخاصیات على ۰01 یتم بدء طلب G۴۲‏ 11۲۶ لتحميل متويات 0۸1 هذا. لذا يكن للبرنامج النصي 
أن يمرر معلومات إلى ملقم الويب بترميز هذه المعلومات قي جزء سلسلة الاستعلام من 1 صورة 
وبضبط الخاصية ۲ء للعنصر <ه«1>. يجب أن يعيد ملقم الويب صورة ما كنتيجة لذا الطلب لكن يكن 
لهذه الصورة أن تكون غير مرثية كصورة شفافة قياسها 1 بكسل في 1 بكسل على سبيل المخال". 

إن العلاماتٽ <iframe>‏ إضافة أحدث إلى HM1‏ وهي أكثر امتتقرارا من العلامات <وصسن> لأنه يمكن 
للقم الويب أن يعيد نتيجة قابلة للفحص باستخدام البرنامج النصي بدلا من إعادة ملف الصورة 
الثنائي. ولبرجة 51۲۲ 2 باستخدام العلامة <«سهء#> » يرمز البرنامج النصي أولا المعلومات للقم 


تسمى الصور من هذا النوع اانا بعثرات الويب ءعں8 ط۷ ولما سمعة سيئة بسبب الإساءة للخصوصية الذي يحدث عند 
استخدام هذه العثرات لإيصال المعلومات إلى ملقم غير ذاك الذي حملت منه صفحة الويب. من الاستخدامات الشائعة 
والشرعية لعثرات الويب نذكر تعداد الزوار وتحليل الازدحام في مواقع الويب. عندما تبرمج صفحة ويب الخاصية ١۲ء‏ لصورة 
لإرسال معلومات ثانية إلى ا ملقم الذي حملت منه هذه الصفحة» فلا يوجد ما يدعونا للقلق إزاء خصوصية المستخدم. 
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الويب في 01 ثم يضبط الخاصية ء۲ للعلامة <عصه٤:>‏ على ا0 هذا. ينشئ الملقم مستند H101‏ 
يحوي استجابته ويرسله ثانية إلى مستعرض الإنترنت الذي يعرضه في حصهء#ا>. من غير الضروري أن 
<iframe> ùy‏ و للمستخدم بل يمكن أن يكون فيا باستخدام ٤58‏ على سبيل المثال. يمكن 
للبرنامج النصي الوصول إلى استجابة ا ملقم عن طريق العبور في غرض المستند ل <ءمه#>. لاحظ أن 
هذا العبور بخضع لقيود سياسة الأصل نفسه التي شرحناها في المقطع 13.8.2. 

ملك انی و6 ا الخاصية ء التي يمكن ضبطها للتسبب بطلب 11۲۶ ديناميكي. إن برمجة 
۶ نصيا باستخدام العلامات <منءءء> شيقٌ للغاية لأن التفسير يكون غير ضروري عندما تأخذ 
استجابة الملقم شکل کود ۲م نەه[ حیث أن مفسر ٤مءء5ه‏ ۷ه[ هو الذي ينفذ استجابة الملقم. 

على الرغم من أن برجة 11۲۲۲ نصياً باستخدام العلامات <عص> و <حصهتة> و حاونعمء» مكنة إلا أن 
تنفيذها بشكل نقال مهمة صعبة. يركز هذا الفصل على طريقة أخرى أكثر قوة لتحقيق ذلك. إن 
الغرض ءء»٩٠۸م؛؛XM1۴‏ مدعوح بشكل جيد في المستعرضات الحديثة ويؤمن و کاملا إلى 
البروتوکول ۸11۲۴ کما بمکنه بدء طلبات ۲05۲ و 1۴۸٥‏ إضافة إلى طلبات ١ع‏ النظامية. بمكن 
للغرض +ءء»٩٠۸م٤111×‏ أن يعيد استجابة ا ملقم بشكل متزامن أو غير متزامن كما يمكنه أن يعيد 
ا لمحتوى كنص أو كمستند .00M‏ يشكل الغرض اءء»٠۹٠۸م:٤M11×‏ حجر الأساس لميكلية تطبيقات 
الويب المعروفة بالاسم ×هز4. سنشرح تطبيقات ×هز۸ بعد توضيح كيفية عمل هذا الغرض. 

سنعود إلى موضوع برجة 11۲۲۴ نصياً باستخدام العلامات <منءء> في نهاية هذا الفصل حيث 
سنوضح كيفية تحقيقها عندما لا يكون الغرض اءء»»ء۸ :)11× متوفرا. 


XMLHttpRequest şil 20.1 

إن برجة HTTP‏ ا باستخدام XMLHttpRequest‏ عملية مؤلفة من ثلاث مراحل : 
إنشاء غرض .XMLHttp Request‏ 
۰ تحدید وإدخال طلب 1۲۲۶ إلى ملقم الويب. 
٠‏ استعادة استجابة ا ملقم بشكل متزامن أو غير متزامن. 

تتضمن المقاطع الفرعية التالية معلومات إضافية عن كل مرحلة من هذه المراحل. 


1 الحصول على غرض الطلب 
لم يضبط الغرض ١١ء»١٠۸م٤؛111×‏ بمعيار على الإطلاق وعملية إنشائه ختلفة ذj Internet Explorer‏ 
عنها في بقية المنصات (لحسن الحظ أن واجهة برمجة التطبيقات التي تستخدم الغرض 
HttpRequetاXM‏ هي نفسها على كل المنصات). 
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يتم إنشاء الغرضص XMLHttpRequest‏ ق معظم المستعرضات پاستد عا سط للباني : 
var request = new XMLHttpRequest () ;‏ 
لم یکن ي 1۴ قبل النسخة السابعة منه تابع ڊil XMLHttpRequest()‏ |3 أن IE 5 jû XMLHttpRequest‏ 
و6 ۴هو غرضص Acti‏ وجب إنشاؤه بتمریر اسم الغرضص اك البانى ActiveXObject()‏ ; 
var request = new ActiveXxOb ject ("Msxml2.XMLHTTP");‏ 
لسوء الحظ فإن اسم الغرض تلف في الإصدارات المختلفة من مكتبة #11۶ 1× الخاصة 
ب ا#هوهMi.‏ لذا قد تضطر في بعض الأحيان» اعتمادا على المكتبات البتة على الزبون» إلى 
استخدام هذا الكود البديل : 
var request = new ActiveXxOb ject ("Microsoft .XMLHTTP");‏ 


نری ق المغال 20-1 تابعا خدما مستقلا عن illصة HTTP.newRequest) awl‏ يستخدم لإنشاء أغراض 
.XMLHttpRequest‏ 


المتال 20-1 التابع dlخدaa„ .HTTP.newRequest()‏ 


// This is a list of XMLHttpRequest-creation factory functions to try 
HTTP._factories = [ 
function () { return new XMLHttpRequest (); }, 
function () { return new ActiveXxOb ject ("Msxml2.XMLHTTP"); }, 
function () { return new ActiveXxOb ject ("Microsoft.XMLHTTP"); } 
1; 


// When we find a factory that works, store it here. 
HEIE;ZEACESEY =: ROLL; 


// Create and return a new XMLHttpRequest object. 


// The first time we're called, try the list of factory functions until 
// we find one that returns a non-null value and does not throw an 
// exception. Once we find a working factory, remember it for later use. 
// 
HTTP.newRequest = function () { 

if (HTTP._factory != null) return HTTP._factory(); 


for(var i = 0; i < HTIP._factories.length; i++) { 


try { 
var factory = HTTP._factories[i]; 
var request = factory (); 
if (request != null) { 


HTTP._factory = factory; 
FQEUED EEGUEST? 
} 
} 
catch (e) { 
continue; 


} 
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// If we get here, none of the factory candidates succeeded, 
// so throw an exception now and for all future calls. 
EATTPS_ALSCTEOEF 
= function () { 
throw new Error ("XMLHttpRequest not supported"); 
} 
HTTP._factory(); // Throw an error 


2 إدخال الطلب 


ما أن يتم إنشاء الغرض ١ءء»٠۸م٠؛ M18‏ ×» تكون الخطوة التالية هي إدخال الطلب إلى ملقم الويب 
وهذه الخطوة بحد ذاتها مؤلفة من عدد من الخطوات الفرعية. . استاع أولاً الطريقة 0«ءمه لتحديد 
۸1 الذي تطلبه والطريقة 11۲۶ للطلب. تتم معظم طلبات 11۲۶ باستخدام الطريقة ۲ التي ٿنڙل 
ببساطة محتويات 10۸1. ومن الطرق المفيدة الأخرى 1 التي تستخدمها معظم نماذج ٨1×٧1‏ وهي 
تسمح بتضمين قيم المتحولات المسماة كجزء من الطلب. إن ۸۴۸۳ هي طريقة 1۲۲۴ مفيدة آخرى 
فهي تطلب من الملقم أن يعيد الترويسات المرافقة ل 0۸1ل. إن هذا يكن البرنامج النصي على سبيل 
المثال» من التحقق من تاريخ تعديل المستند دون تنزيل حتوى المستند نفسه. حدد الطريقة و 1ل 
الطلب باستخدام الطريقة )۸ء٥‏ : 
request .open ("GET", url, false);‏ 
تضبط الطريقة 0١٠ص٠‏ في الحالة E‏ غرض ۸م٤۴1 XM‏ غير متزامن »› وتمریر ءا في 
البارامتر الثالث يجعل هذه الطريقة د تحضر استجابة الملقم بشكل غير متزامن. إن الاستجابات غير 
امز امنة مفضاة غادة بنذ أن تلك الرامتة أسهل بفليل لذا ستدرسها آولا. 
تقبل الطريقة 0١٠م‏ إضافة إلى البارامتر الثالث الاختياري اشا وکل مرور کبارامترین اختیاریین 
رابع وخامس» ويستخدم هذا البارامتران عند طلب ۸1ا من ملقم يطلب المصادقة 
إن الطريقة 0١ء‏ مه لا ترسل الطلب إلى ملقم الويب بل إنها تخزن ببساطة بارامترتها لتستخدم لاحقاً عندما 
يرسل الطلب فعليا. جب أن تضبط أية ترويسات ضرورية للطلب قبل إرساله. وهذه بعض الأمثلة” : 
"User-Agent", "XMLHttpRequest ") ;‏ 
"Accept-Language", "en");‏ 


"Tf-Modified-Since", 
)); 


ا ا ای 
الذي تبنيه وبالتالي يجب عليك تحديد الترويسة "نا٥٥٥"‏ صراحة فقط إذا أردت إرسال ملف تعريف 


ارتباط مزيف إلى الملقم. 


request.setRequestHeader 
request.setRequestHeader 
request.setRequestHeader 
lastRequestTime.toString 
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أخيرا وبعد إنشاء غرض الطلب واستدعاء الطريقة 0١ء‏ مه وضبط الترويسات » أرسل الطلب إلى ال ملقم : 


request.send (null) ; 


إن بارامتر التابع ۵0« هو جسم الطلب ویکون ااسہ مع طلبات 6۴۲ 1۲۲۴ أما مع طلبات ۲051۲» 
فيجب أن يحوي بيانات النموذج التي سترسل إلى الملقم (راجع المثال 20-5). مرر حاليا ااه فقط 
(لاحظ هنا أن البارامتر ااه إجباري. إن الغرض ٤١ء٠۹٠۸م٤111۲×‏ هو غرض على طرف الزبون ولا 
تتسامح طرقه» فی ۴۲۲۴۶ على الأقل » مع البارامترات الحذوفة كما تفعل توابع امءء؟۷ة[). 


3 الحصول على استجابة متزامنة 

إن غرض ۴۸٩۰۲‏ :11× لا یخزن فقط تفاصیل طلب 1۲۲۶ الذي نفذه بل إنه يمثل أيضاً استجابة 
الملقم. إذا مررت ءا في البارامتر الثالث للطريقة 0«ءمه فإن الطريقة ۵0«ءء تكون متزامنة أي أنها 
تجمد ولا تعود حتى تصل استجابة الملقم'. 

إن الطريقة ۵0«ءء لا تعيد كود حالة » ويمكنك ما أن تتم العودة من هذه الطريقة أن تفحص كود حالة 
ال معاد من ا ملقم باستخدام الخاصية ه۲ لغرض الطلب. إن القيم الممكنة لهذا الكود معرفة في 
البروتوکول 1۲۲۴ فالحالة 200 تعني أن الطلب كان ناجحا وأن الاستجابة متوفرة» في حين أن الحالة 
4 تدل على الخطأً "سه٤ "٥۲‏ الذي يحدث عندما يكون 0۸1 المطلوب غير متوفر. 

يجعل الغرض +ء»4٠۸م:٤‏ 1۴× استجابة الملقم متوفرة كسلسلة مخرفية عن طريق الخاصية 
reponse ×‏ لغرض الطلب. إذا كانت الاستجابة مستند »×١1‏ فيمكنك الوصول إلى هذا المستند 
اا على أنه غرض ۲٢٤ء00‏ في 00M‏ وذلك باستخدام الخاصية ۷1×ء«0مءءء. لاحظ وجوب أن 
بحدد الملقم مستندات ا1×× الخاصة به باستخدام نوع M15٤‏ المسمى "اص×»٠"‏ كي يتمكن 
HttpRequestاXM‏ من تفسير الاستجابة إلى غرض 1۲ء .00cu‏ 

يبدو الكود الذي يلي الطريقة ۵0«ءء عادة كما يلي عندما يكون الطلب متزامناً : 


if (request.status == 200) { 
// We got the server's response. Display the response text. 
alert (request.responseText) ; 

} 

else { 
// Something went wrong. Display error code and error message. 
alert ("Error " + request.status + ": " + request.statusText); 


إن للغرض اءء (M18 ٤٤مR۸ ٠٩»‏ مزايا قوية للغاية لكن واجهة برمجة تطبيقاته غير مصممة بشكل جيد. على سبيل المثال» من 
الأفضل أن تكون القيمة المنطقية التى تحدد السلوك المتزامن أو غير المتزامن بارامترا للطريقة ۵0«ءء. 
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يۇمن الغرضص XMLHttpRequest‏ « بالإضافة إلى آكواد الحالة ونص أو مستند الاستجابة› ورل إلى 
ترویسات ۴P‏ العادة من ملقم الويب. تعيد الطريقة getAll[ResponseHeaders()‏ ترویسات الاستجابة 
ككتلة نص غير مفسرة ق حين تعيد الطريقة nı getResponseHeader()‏ ترويسة مسماة»› على سبیل 


: المغال‎ 
if (request.status == 200) { // Make sure there were no errors 
// Make sure the response is an XML document 
1f (request .getResponseHeader ("Content-Type") == "text/xml") { 
var doc = request.responseXxXML; 


// Now do something with the response document 
} 

نة مشكلة واحدة في استخدام ٤ءء‏ و٠۴م٤؛11×‏ بشكل متزامن وهي أنه إذا توقف ملقم الويب عن 
الاستجابة فان الطريقة ۵0«ءء تجمد لوقت طويل» ويتوقف تنفيذ ؛ونءء؟ه«ه[ ويبدو كما لو أن 
مستعرض الإنترنت قد علق (إن هذا يعتمد على المنصة بطبيعة الحال). إذا علق الملقم أثناء تحميل 
صفحة عادية» يمكن للمستخدم نقر الزر مه٠‏ في المستعرض وتجريب ارتباط آخر أو محدد موقع 
معلومات آخر. لکن لا یوجد زر ۲٥‏ مع ۲ں ۴م؛٤M1۴8×‏ إذ لا تقدم الطريقة ۵40دءء أي أسلوب 
لتحديد وقت انتظار أعظمي كما أن نموذج التنفيذ وحيد المسار ل ٤ون#ءكه«ه[‏ على طرف الزبون لا 

يسمح لبرنامج نصي بقاطعة ءءد۹٠۸م٠٤٨1×‏ ما أن يتم إرسال الطلب. 


یکمن الحل لہذه المشكلة ق استخدام XMLHttpRequest‏ بشکل غير متزامن. 


4 التحامل مح استجابة غير متزامنة 

لاستخدام الغرض XMLHttpRequest‏ ق النمط غير المتزامن»› مرر ع٣ا‏ کبارامتر الت إلى الطريقة 

0ءصه (أو احذف ببساطة البارامتر الثالث فتستخدم القيمة مد في الحالة الافتراضية). إذا فعلت هذا 

فإن الطريقة ۸40ءء ترسل الطلب إلى الملقم ثم تعود حالا. عندما تصل استجابة الملقم فإنها تصبح 

متوفرة ق الغرضص jz XMLHttpRequest‏ طریق نفس الخراص المستخدمة ق الحالة المتزامنة. 

تشبه الاستجابة غير المتزامنة من الملقم نقرة الفأرة غير المتزامنة التي يقوح بها المستخدم إذ يجب تنبيه 

المستخدم بحدوثها. ويتم هذا باستخدام معالم حدث. يتم ضبط معالج الحدث مع الأغراض 

XMLHttpRequest‏ على الخاصية .onreadystatechange‏ يشير اسم هذه الخاصية اك أن تابع معا 

الحدث يتم استدعاؤه کلما تغيرت قيمة الخاصية .readyState‏ إن readyState‏ عبارة عن عدد صحیح 

بحدد حالة طلب H11١‏ وقيمه الممكنة واردة فى الحدول 20-1. لا یعرز llغرض XMLHttpRequest‏ 
و وارده ي اجدو يعر ص 

ثوابتا رمزية للقيم الخمسة المعروضة في هذا الجدول. 
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الجدول 20-1 قيم الخاصية عeady5S†atإ‏ في |لغرض .XMLHttp Request‏ 


readyState‏ المعنى 
0 لم تستدعی ()008۸ بعد. 
1 استدعیت 08۸0 لکن 5۵۸۵0 لم تستدع. 
2 أستدعيت ()۵۸0ء لكن الملقم لم يستجب بعد. 
3 يتم استقبال البيانات من الملقم. تختلف القيمة 3 عاة۷5ك ج۲ نوعاً ما بين 
Firefox‏ و .[nternet Explorer‏ راجع المقطع 20.1.4.1. 
4 اكتملت استجابة الملقم. 


ما أن XMLHttpRequest‏ لك معا حدث وحید فقط» فإن هذا المعالج يستدعى مع كل الأحداث 
المهكة: سنن المعالج onreadystatechange‏ مرة واحدة عندما تستدعى الطريقة 0١٠ص٠‏ ومرة أخرى 
عندما تستدعى الطريقة ۵0«ءء. يستدعى هذا المعالج مرة أخرى عندما تبدأ استجابة الملقم بالوصول 
ومرة أخرى أخيرة عندما تكتمل الاستجابة. وبخلاف معظم الأحداث في +منءءكه«ه[ على طرف 
الزبون» لا يتم تمرير آي غرض حدث إلى المعالح ءع«دطءء٤هاءرلهءإه.‏ يجب أن تفحص الخاصية 
red yt‏ للغرض ۲ء٤٠‏ ٩٠۸م٤٤M11×‏ لتحديد السبب الذي أدى إلى استدعاء معالج الحدث. لسوء 
الحظ لا يمرر الغرض ١ءء»۹٠۸م111×‏ كبارامتر إلى معالج الحدث أيضا لذا يجب أن تتأكد من تعريف 
تابع معالح الحدث في جال تغطية يمكنه من الوصول إلى غرض الطلب. يبدو معالج حدث نموذجي 
لطلب غير متزامن كما يلي : 


// Create an XMLHttpRequest using the utility defined earlier 
var request = HTTP.newRequest () ; 


// Register an event handler to receive asynchronous notifications. 
// This code says what to do with the response, and it appears in a nested 
// function here before we have even submitted the request. 


request.onreadystatechange = function() { 
if (request.readyState == 4) { // If the request is finished 
if (request.status == 200) // If it was successful 
alert (request.responseText) ; 4 Display the server's 
response 


} 
} 


// Make a GET request for a given URL. We don't pass a third argument, 
// so this is an asynchronous request 
request .open ("GET", url); 


// We could set additional request headers here if we needed to. 


// Now send the request. Since it is a GET request, we pass null for 
// the body. Since it is asynchronous, send() does not block but 

// returns immediately. 

request.send (null); 
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1 ملاحظات عن القيمة 3 للخاصية ءه)5رلهء۲ 

لم يضبط الخرض ١١٠»٠۹٠۸م٠؛111×‏ بعيار على الإطلاق لذا فإن المستعرضات تختلف في معالجتها 
للقيمة 3 للخاصية ١5لههء.‏ على سبیل المثال یستدعی المستعرض ۴1۳۲۴٥×‏ أثناء عمليات التنزيل 
الكبيرة المعاج onreadystatechange‏ عدة مرات ق القيمة 3 ل ready5tate‏ لإعطاء معلومات عن تقدم 
عملية التنزيل. يمكن للبرنامج النصي أن يستخدم الاستدعاءات العديدة هذه لعرض مؤشر تقدم 
للمستخدم. من ناحية أخرى نجد أن 1nternet e‏ يفسر اسم معا الجحدث بشكل صارم إذ 
يستدعيه فقط عندما تتغير قيمة ١٤؛5رلهءء‏ فعليا. إن هذا يعني أنه يستدعى مرة واحدة فقط مع القيمة 
3 ل 5tateرلهءء‏ بغض النظر عن حجم المستند الذي یتم تنزیله. 

تختلف المستعرضات اا في الحجزء ء المتاح من استجابة الملقم في القيمة 3 ل e٤ه؛5رلهءء.‏ وعلى الرغم 
من أن القيمة 3 ل readyState‏ تعني أن ا ما من الاستجابة قد وصل من الملقم» فإن توثيق 
8 ينص صراحة على أنه من الخطاً استعلام ۲٭1ءء«همءءء في هذه الحالة. أما في المستعرضات 
الأخرى» فيمكن لاستعلام ×١1ءء«٠مءء‏ أن يعيد الجزء المتاح من استجابة الملقم» لكن هذه الحقيقة 
E‏ 

لسوء الحظ فإن أيا من مطوري المستعرضات الرئيسية لم يقدم بعد توثيقاً كافياً للأغراض 
.XM1HttpRequest‏ لذا فإنه من الآمن بمکان» وحتی یتم وضع معيار أو تتم كتابة توثيق واضح»› أن 
نتجاهل أية قيمة مختلفة عن 4 ل عtهt؟رdهء.‏ 


XMLHttpRequest jlaî 20.1.5 


بمکن لغرض ۲ءء ں۹٠۴م٤M1۴×»‏ وكجزء من سياسة الأصل نفسه (راجع المقطع 2 ) أن يبدا 
a E‏ إن هذا القيد 
معقول ومنطقي ويمكنك جتجاوزه إذا كنت مضطرا وذلك باستخدام برنامج نصي على طرف الملقم 
كملقم وكيل ۲٥×‏ يجلب الحتويات التي تقع خارج الموقع. 

إن لہذا القيد الأمني أ مهم للغاية على XM] pF ques‏ وهو أن XMLHttpRequest‏ يصنع طلبات 
۳ ولا يعمل مع خططات 0۸1 أخرى. على سبيل ال مخال» لا يمكنه العمل مع 0۸1 التي تستخدم 
البروتوكول //:٠اگ.‏ إن هذا يعني عدم إمكانية اختبار برامج XMLHttpRequest‏ النصية من 2 
الملفات المحلي بل لا بد من تحميل هذه البرا مج التي تنوي اختبارها إلى ملقم ويب (أو أن تشغل ملقما 
على حاسوبك الشخصي). كما يجب أن تحمل هذه البرامج إلى مستعرض الاإنترنت باستخدام ۸۲۲۴ 
وذلك کي تتمکن من بدء طلبات 1۲۲۴ بمفردها. 
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2 اأمثلة وبرnIج‏ خanڍA‏ عj XMLHttpRequest‏ 
عرضنا ق بداية هذا الفصل التابع الخدمي HTTP.newRequest()‏ الذي پستخدم لإنشاء غرضص 
XMLHttpRequest‏ لأي مستعرض. بمکننا تہبسہط استخدام XMLHttpRequest‏ أكثر عن طریق التوابع 

الخدمية. تتضمن المقاطع الفرعية التالية بعضا من هذه التوابع. 


1 توابع ٤1‏ الخدمية الأساسية 
يتضمن المثال 20-2 تابعا بسيطاً للغاية يمكنه التعامل مع الاستخدامات الأكثر شيوعا للغرض 
HtpRequetاXM.‏ مرر إلى هذا التابع 0۸1 الذي تريد جابه والتابع الذي يجب تمرير نص 0۸1ا له. 


المتال 20-2 التابع الخدمي )۵×۲ ۲۲و.1۲۲۲۶. 


/** 

* Use XMLHttpRequest to fetch the contents of the specified URL using 
* an HTTP GET request. When the response arrives, pass it (as plain 

* text) to the specified callback function. 


# 


* This function does not block and has no return value. 


A 
HTTP.getText = function (url, callback) { 
var request = HTTP.newRequest () ; 
request.onreadystatechange = function() { 
if (request.readyState == 4 && request.status == 200) 


callback (request.responseText); 
} 
request. open ("GET", url); 
request.send (null); 
}; 


أما المغال 20-3 فهو بديل بديهي يستخدم لجحلب مستندات ۷1× وتمرير تمثيلها المغسر إلى تابع إعادة 
الاستدعاء. 
المثال 20-3 التابع الخدميJي .HTTP.getXML()‏ 


HTTP.getXML = function (url, callback) { 


var request = HTTP.newRequest () ; 
request.onreadystatechange = function() { 
if (request.readyState == 4 && request.status == 200) 


callback (request.responseXML) ; 
} 
request .open ("GET", url); 
request.send (null); 
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2 _ جلب الترويسات فقط 
من مزايا الغرض 1٨1٤۸٤۹» ٠۲‏ × أنه يمكنك من تحديد طريقة 11۲۶ التي ستستخدم. يطلب الطلب 
۵59 11۲۶ من ال ملقم أن يعيد ترويسات ۸1ا معطى دون إعادة حتوى 0۸1 هذا. يمكن الإفادة من 
ذلك» على سبيل المثال» لفحص تاريخ تعديل مورد ما قبل تنزيله. 

يبين المغال 20-4 كيفية تنفيذ طلب 1٨42‏ فهو يتضمن تابعا لتفسير آزواج اسم /قيمة لترویسات H۲۲۶‏ 
وتخزينها كأسماءٍ وقيم لخواص غرض ١1ا٤8‏ «ه[. يتضمن هذا ا مخال أيضا تابعا لمعالجة الخطاً يستدعى 
إذا عاد الملقم 4 أو أي کود خطأاً آخر. 


المتال 20-4 التابع اdlخدaa .HTTP.getHeaders()‏ 


Xx 

* Use an HTTP HEAD request to obtain the headers for the specified URL. 

* When the headers arrive, parse them with HTTP.parseHeaders() and pass the 
* resulting object to the specified callback function. If the server returns 

* an error code, invoke the specified errorHandler function instead. If no 
* error handler is specified, pass null to the callback function. 


*/ 

HTTP.getHeaders = function (url, callback, errorHandler) { 
var request = HTTP.newRequest () ; 
request.onreadystatechange = function() { 

if (request.readyState == 4) { 
if (request.status == 200) { 


callback (HTTP.parseHeaders (request) ) ; 
1 
else { 
if (errorHandler) errorHandler (request.status, 
request.statusText) ; 


else callback (null); 


1 
1 
request. open ("HEAD", url); 
request.send (null); 
J; 


// Parse the response headers from an XMLHttpRequest object and return 
// the header names and values as property names and values of a new object. 
HTTP.parseHeaders = function (request) { 
var headerText = request.getAllResponseHeaders(); // Text from the server 
var headers = {}; // This will be our return value 
var ls = /^\s*/; // Leading space regular expression 
var ts = /\s*$/; // Trailing space regular expression 


// Break the headers into lines 
var lines = headerText.split ("\n"); 
// Loop through the lines 
for (var i = 0; i < lines.length; i++) { 
var line = lines[i]; 
if (line.length == 0) continue; // Skip empty lines 
// Split each line at first colon, and trim whitespace away 
var pos = line.indexOf(':'); 
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var name = line.substring (0, pos).replace(ls, "").replace (ts, ""); 
var value = line.substring (pos+1) .replace (ls, "").replace (ts, ""); 
// Store the header name/value pair in a JavaScript object 

headers [name] = value; 


} 


return headers; 
J; 


HTTP POST بlۈطll‎ 20.2.3 


يتم إدخال نماذج 11۸1 في الحالة الافتراضية إلى ملقمات الويب باستخدام الطريقة ۲05۲ 1۲۲۲ . 
تمر البيانات مع طلبات ۲05 إلى ال ملقم في جسم الطلب بدلا من ترميزها في 0۸1 نفسه. وبا أن 
بارامترات الطلب ترمز في 0۸1 الطلب »6٤۲‏ فإن الطريقة فط فا کن اطا 
أي آثر جانبي على الملقم» أي عندما نتوقع أن تعيد طلبات 6٤١‏ المتكررة لنفس ا0۸1 مع نفس 
البارامترات النتيجة نفسها. عند وجود ظواهر مرافقة للطلب (عندما يخزن الملقم بعض البارامترات في 
قاعدة بیانات)» فلا بد من استخدام الطلب ۲05۲ بدلا من G٤۲‏ . 


یبین المغال 5 كيفية تنفيذ طلب .XMLHttpRequest POST‏ ت تخدھ^ |لطر ق HT1TP.post()‏ 
و 3 


التابع 1.٣٥۵٤۴٥۳۳4 ٤40(‏ لتحويل خواص غرض إلى سلسلة حرفية يكن استخدامها كجسم 
لطلب 1 تمر ر هذه السلسلة المحرفية فيما بعد إلى الطريقة («ءء.ءءuي٠۸م؛X×M11‏ وتصبح 
جسما للطلب (يمكننا إلحجاق السلسة الجر فية المعادة من HTP.encodeForm D0‏ بمحدد موقع 
ا 1 وذلك باستخدام حرف علامة الاستفهام للفصل بين 0۸1 والبيانات). يستخدم المثال 
20-5 انشا الطريقة HTTP._getResponse()‏ التي تفسر استجابة ملقم استناداً إلى نوعها وهي مضمنة قي 


المقطع التالي. 


المثال 20-5 التابع الخدمي ()غکهم.1۲۲۲. 


Xx 
* Send an HTTP POST request to the specified URL, using the names and values 
* of the properties of the values object as the body of the request. 
* Parse the server's response according to its content type and pass 
* the resulting value to the callback function. If an HTTP error occurs, 
* call the specified errorHandler function, or pass null to the callback 
* if no error handler is specified. 
xx*/ 
HTTP.post = function (url, values, callback, errorHandler) { 
var request = HTTP.newRequest () ; 
request.onreadystatechange = function() { 
if (request.readyState == 4) { 
if (request.status == 200) { 
callback (HTTP ._getResponse (request) ) ; 
1 
else { 
if (errorHandler) errorHandler (request.status, 
request.statusText) ; 
else callback (null); 
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} 


request .open ("POST", url); 

// This header tells the server how to interpret the body of the request. 

request. setRequestHeader ("Content -Type”", 
"application/x-www-form-urlencoded") ; 

// Encode the properties of the values object and send them as 

// the body of the request. 

request.send (HTTP.encodeFormData (values) ); 


}; 


/** 
* Encode the property name/value pairs of an object as if they were from 
* an HTML form, using application/x-www-form-urlencoded format 


*/ 
HTTP.encodeFormData = function (data) { 
var pairs = []; 
var regexp = /%20/g; // A regular expression to match an encoded space 


for (var name in data) { 
var value = data [name] .toString (); 
// Create a name/value pair, but encode name and value first 
// The global function encodeURIComponent does almost what we want, 
// but it encodes spaces as %20 instead of as "+". We have to 
// fix that with String.replace () 
var pair = encodeURIComponent (name) .replace (regexp, "+") + '=' + 
encodeURIComponent (value) .replace (regexp, "+"); 
pairs.push (pair); 


} 


// Concatenate all the name/value pairs, separating them with & 
EEEUEA PATES JOLLET 


}; 


إن المثال 21-14 مثال آخر ینشئ طلب ۲051 باستخدام غرض ١ءء»۹٠۸م:٤M11×.‏ يستدعي ذلك ال مال 
خدمة ويب SEY‏ تمرير قيم النموذج في جسم الطلب» فإنه یمرر نص مستند .XM1‏ 


0.4 ا!llستجlبlت JSON-Encoded g XML g HTML‏ 
لقد تعاملنا مع استجابة ا ملقم على طلب 1۲۶ في كل الأمثلة التي عرضناها حتى الآن على أنها 
قيمة نص بسيط. وهذا أمر جائ تماما ولا يوجد ما ينص على أن ملقمات الويب لا يمكنها إعادة 
المستندات التي نوع حتواها "«نهام/ا×ها". يكن لكود امناءكه«ه[ أن يفسر مثل هذه الاستجابات 

باستخدام الطرق ع«ذء»؟ وأن يفعل بها ما يلزم. 

يمكتنا دائما التعامل مع استجابة ا ملقم على أنها نص صرف حتى ولو كان نوع محتواها مختلفا. إذا 
أعاد ا ملقم مستند 1۷1» على سبيل المثال» فيمكنك استعادة حتوى هذا المستند باستخدام الخاصية 
reponse ×‏ ومن ثم استخدام هذا المحتوى لضبط الخاصية ٠۲11۷1‏ مذ لعنصر ما في المستند. 
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على أية حال» ثمة طرق أخرى للتعامل مع استجابة الملقم. ذكرنا في بداية هذا الفصل أنه إذا أرسل 
ملقم استجابة نوع حتواها "لص×/×"» فيمكننا استعادة تمثيل مفسر لمستند ۸1× باستخدام الخاصية 
اresponseXM.‏ إن قيمة هذه الخاصية هى غرض ہء«uءہ0‏ قي 00M‏ ويمكنك البحث والعبور فيه 
باستخدام طرق .20M‏ ۰ 

لاحظ» على أية حال» أن استخدام ۸1× كتنسيق بيانات قد لا يكون انيار الأفضل دائما. إذا أراد 
الملقم تمرير بيانات لتتم معالجتها بواسطة برنامج مءء8ه»ه[ نصي فإن ترميز هذه البيانات إلى ×»M1‏ 
على ا ملقم عملية غير فعالة. ومن الأفضل جعل الغرض ۲١٠»۹٠۴م:٤۷111×‏ يفسر هذه البيانات إلى 
شجرة من عقد 00٥۷‏ ثم جعل البرنامج النصي يعبر في هذه الشجرة لاستخلاص البيانات. ثمة طريقة 
أسهل تقوم على جعل ال ملقم يرمز البيانات باستخدام أحرف أغراض ومصفوفات نا۷5[ وتمرير 
نص ٠منءء8ه«ه[‏ المصدر إلى مستعرض الإنترنت. يفسر البرنامج النصي بعدها الاستجابة بتمريرها 
ببساطة إلى الطريقة )۷1ء في امنإ ؟vaه[.‏ 


إن ترمیز البيانات بصيغة أحرف أغراض ومصفوفات crip‏ vaSهر‏ یعرف باسم ترمیز غرضص JavaScript‏ 
أو JavaScript Object Notation (JSON)‏ . نری هنا ترمیزی‌ ×M1‏ و JSON‏ لنفس البيانات : 


<!-—- XML encoding =-> 
<author> 
<name>Wendell Berry</name> 
<books> 
<book>The Unsettling of America</book> 
<book>What are People For?</book> 
</books> 
</author> 


// JSON Encoding 
{ 
"name": "Wendell Berry", 
"BOOKS: f 
"The Unsettling of America", 
"what are People For?" 
] 
} 


يستدعي التابع 1.0 المعروض في المثال 20-5 التابع H._getResponse()‏ الذي يفحص 
الترويسة ١صرآ٤١ء؛«ه٤‏ لتحديد صيغة الاستجابة. إن الخال 206 هو تضمين بسيط للتابم 
HTP._getResponse)‏ يعد مستندات Document ضا|رغÎ XML‏ ويقیم مستندات امنا a8‏ ەە أو 
۸ باستخدام الطريقة 10« ويعيد أي حتوى آخر كنص بسيط . 


يمكنك تعلم المزيد عن [50١‏ بزيارة الارتباط ê .http://json.org‏ تقديم فكرö JSON‏ من ږJıã Douglas Crockford‏ 
ويتضمن هذا الموقع ارتباطات إلى مرمزات ومفككات ترميز [50١‏ لعدد كبير من لغات البرجة. إن 50۸[ ترميڙ مفيدٌ 
للبيانات حتی ولو لم تکن تستخدم .JavaScrip†‏ 
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.HTTP._getresponse() gılill 20-6 لJلاتملا‎ 


HTTP._getResponse = function (request) { 
// Check the content type returned by the server 
switch (request .getResponseHeader ("Content-Type")) { 


case "text/xml": 
// If it is an XML document, use the parsed Document object. 
return request.responseXML; 
case "text/json": 
case "text/ javascript": 
case "application/javascript": 
case "application/x-javascript": 
// If the response is JavaScript code, or a JSON-encoded value, 
// call eval() on the text to "parse" it to a JavaScript value. 
// Note: only do this if the JavaScript code is from a trusted server! 
return eval (request.responseText) ; 
default: 
// Otherwise, treat the response as plain text and return as a string. 
return request.responseText; 


J; 
لتفسير بيانات 90۸[ المرمزة كما فعلنا في الخال 20-6 إلا إذا كنت واثقا تماما من‎ «١10 لا تستخدم الطريقة‎ 


أن ملقم الوب لن یرسل کود pt‏ هل تنفيذي خبیث بدلا من بیانات N‏ مرمزة بشکل جید. من 
البدائل الآمنة» استخدام مفكك ترمیز 80۸[ یفسر احرف أغراض ۲م نەه[ یدویا دون استدعاء ۵10». 


5 انقضاء مهلة طلب 

من نقاط الضعف في الغرض »٠و٠‏ 1۴× كونه لا يؤمن أية طريقة لتحديد وقت انقضاء مهلة 
للطلب. إن نقطة الضعف هذه فاضحة مع الطلبات المتزامنة. إذا علق اللقم فإن المستعرض يبقى 
جامدا في الطريقة 40«ءء ويتوقف كل شيء عن العمل. لا تتأثر الطلبات غير التزامنة بالجمود لأن 
الطريقة ۵0ء فيها لا تعلق وبالتالي يمكن لمستعرض الإنترنت مواصلة معالجة أحداث المستخدم. 
افترض أن التطبيق ينفذ طلب 11۲۶ مع غرض ءد١٠۴م؛٤111×‏ عندما ينقر المستخدم على زر. من 
المغيد» لمنع الطلبات المتعددة» أن نلغي تفعيل هذا الزر حتى تصل الاستجابة. لكن ماذا إذا انهار الاقم 
أو فشل لسبب ما في الاستجابة للطلب؟ إن المستعرض لن جمد لكن التطبيق سيجمد مع زر معطل. 
منع هذا النوع من المشاكل» قد يكون من المفيد أن تضبط وقت انقضاء المهلة ا لخاص بك مستخدما 
التابح Wind ow.setrimeout)‏ عند تنفیذ طلبات 111۲۶. ستحصل في الجالة الطبيعية على الاستجابة 
قبل إطلاق معالج انقضاء المهلة› 5 عندها تستخدم التابع Window.clear Timeout)‏ لإلغاء وقت انقضاء 
المهلة هذا. من ناحية أخرى» إذا أطلق معالج انقضاء المهلة قبل وصول الغرض ءء٠١٠‏ ۸م؛؛1111× إلى 
القيمة 4 للخاصية ١ه٤5رلهءء»‏ فيمكنك إلغاء الطلب باستخدام الطÛطريةة .XMLHttpRequest.abort()‏ 
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من الأفضل بعدها أن تعلم المستخدم بفشل الطلب (ربما باستخدام الطريقة 0ء اه.سهل«W).‏ إذا 
عطلت الزر قبل تنفيذ الطلب فيجب أن تعيد تفعيله بعد انقضاء وقت المهلة. 

يعرف المغال 7 التابع 1.0 الذي يوضح تقنية وقت انقضاء المهلة هذه وهو يمثل نسخة 
مطورة من الطريقة ۰۲۲۰۲×۲0ع.۲۶١1‏ المعرفة في الخال 20-2 كما أنه يتضمن العديد من المزايا الواردة في 
الأمثلة السابقة با فيها معالح خطأ وبارامترات طلب والطريقة 0۸0م۲۸۰۰ءع_.1۲۲۳. يمكن هذا المخال 
المستخدم من مديد تابع إعادة استدعاء تقدم اختياري دعن كلما استدعي المعالج 
ga onreadystatechange‏ قیم غير القيمة 4 ل ءtهt؟رلهءء.‏ يمكن تابع إعادة استدعاء التقدم البرنامج 
النصي من عرض معلومات عن التنزيل للمستخدم وذلك في المستعرضات ک ×۴|۲۲۴۵ التي تستدعي 
هذا المعالج عدة مرات في الحالة 3. 


المنال 20-7 التابع الخدمي )٤٥و.1۲۲۲.‏ 


* 


NHN ¥ *% 


Send an HTTP GET request for the specified URL. If a successful 

response is received, it is converted to an object based on the 
Content-Type header and passed to the specified callback function. 
Additional arguments may be specified as properties of the options object. 


If an error response is received (€e.g., a 404 Not Found error), 
the status code and message are passed to the options.errorHandler 
function. If no error handler is specified, the callback 

function is called instead with a null argument. 


If the options.parameters object is specified, its properties are 
taken as the names and values of request parameters. They are 
converted to a URL-encoded string with HTTP.encodeFormData() and 
are appended to the URL following a '?'. 


If an options.progressHandler function is specified, it is 

called each time the readyState property is set to some value less 
than 4. Each call to the progress-handler function is passed an 
integer that specifies how many times it has been called. 

£ an options.timeout value is specified, the XMLHttpRequest 

s aborted if it has not completed before the specified number 

£ milliseconds have elapsed. If the timeout elapses and an 
ptions.timeoutHandler is specified, that function is called with 
he requested URL as its argument. 


HTTP.get = function (url, callback, options) { 

var request = HTTP.newRequest () ; 

var n = 0; 

var timer; 

if (options.timeout) 

timer = setTimeout (function () { 
request.abort (); 
if (options.timeoutHandler) 
options.timeoutHandler (url); 
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options.timeout) ; 


request.onreadystatechange = function() { 
if (request.readyState == 4) { 
if (timer) clearTimeout (timer) ; 
if (request.status == 200) { 


callback (HTTP ._getResponse (request) ); 
} 
else { 
if (options.errorHandler) 
options.errorHandler (request.status, 
request.statusText) ; 
else callback (null); 
} 
} 
else if (options.progressHandler) { 
options.progressHandler (++n); 
} 
} 


var target = url; 
if (options.parameters) 
target += "?" + HTTP.encodeFormData (options.parameters) 


request .open ("GET", target); 
request.send (null); 


3 «×هز۸ والبرمجة النصية الديناميكية 


يصف المصطلح »ه4 هيكلية من تطبيقات الويب التي تؤدي دور 1۲۲۴۶ المبرمج نصياً والغرض 
HttpRequestاXM‏ (ن الحقيقة»› إن المصطلحین ×4زA‏ و XMLHttpRequest‏ مترادفان قي العديد من 
التطبيقات). إن ×هز4 هو اختصار (بأحرف ليست كلها كبيرة) ل ٤من#ء؟ه۷ه[‏ و ۷1× غير المتزامنة 
Asynchronous JavaScript and XML‏ . وضع هذا المصطلح [ese James Garrett‏ وظهر للمرة الأولى في 
مقالته التي نشرها في شباط من العام 205 "Ajax: A New Approach to Web Applications." | giz‏ . كناك 
العثور على هذه المقالة ق الارتاط صطhttp://www.adaptivepath.com/publications/essays/archives/000385.p.‏ 


إن غرض ۸٥٩٥٤۲‏ م: ×1٩‏ الذي تستند عليه ×هز4 متوفر فی مستعرضات الإنترنت من Mics‏ 
و Netscape/ Moza‏ قبل نشر مقالة 64۴۲٠۲‏ بأربع وا د اه ا شف بدا بمثل هذا الاهتمام. 
لقد تغير هذا في العام 2004 عندما أطلقت ماعهه تطبيق البريد الالكتروني انهه باستخدام 
HpRequestاXM1.‏ لقد أدى هذا الإطلاق إضافة إلى مقالة ۲٠ء6‏ إلى فتح الأبواب على مصراعيها 
مام سیل جارف من الاهتمام ب جهز۸. 


إن البيكلية ×هز4 قوية للغاية وإعطاؤها اسماً وحيداً أدى إلى ثورة في تصميم تطبيقات الويب. تبين فيما بعد» على أية 
حال» أن هذا المصطلح لا يوضح التقنيات التي تشكل تطبيقات ×هز4. تستخدم كل برامج ٤صنإء5ة۷ه[‏ على طرف الزبون 
معا لجات الأحداث لذا فهي غير متزامنة. كما أن استخدام ۷1× في تطبيقات ×هز4 مناسبٌ غالبا لكنه اختياري دائما. إن 
الخاصيات المميزة لتطبيقات ×هز4 هي استخدامها د 1١۲۶‏ المبرجة نصيا لكن هذه الخاصيات لا تظهر في الاختصار. 
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إن الميزة الأساسية في تطبیق ×۸ أنه پستخدم 1۲۲۶ المبرمجة صا للاتصال مع ملقم ويب دون 
التسبب بإعادة تحميل الصفحات. وما أن مقدار البيانات التي يتم ا ا و 
المستعرض ليس بحاجة إلى تفسير وتشكيل المستند (وأوراق النمط والبرامج النصية المرافقة له) فإن 
وقت الاستجابة يتحسن بشكل كبير ونحصل بالنتيجة على تطبيقات ويب تبدو كتطبيقات سطح 
المكتب التقليدية. 
ومن المزايا الاختيارية في ×هز4 نذكر استخدام ۷1× كترميز للبيانات المتبادلة بين الزبون والملقم. يشرح 
الفصل 21 كيفية استخدام صنءء5ةءة[ على طرف الزبون لمعالجة بيانات ۷1× وتنفيذ استعلامات 
XP‏ وتحویلات 1۲× ل ۷1× إلى .11M1‏ تستخدم بعض تطبيقات ×هز4 التقنية 51× لفصل الحتوى 
(بيانات ۷1×) عن العرض (تنسيق ا11۷1 الملتقط كورقة نمط ا5×). إن لہذه المقاربة مزايا إضافية 
تتمثل بتقليل حجم البيانات التي جب نقلها من ال ملقم إلى الزبون وتقليل تفريغ التحويل من الاقم 
إلى الزبون. 
من الممكن صياغة ×هز4 في ميكانيكية ۸۲١‏ '. يستخدم مطورو الويب في هذه الصياغة مكتبات ×هز4 
ی ی طرقي الزبون والملقم لتسهيل الاتصال عالي الملستوى بين الطرفين. لا یشرح 
هذا الفصل أا من مکتبات ×هز۷۲۳۸٥-٥۸۲‏ لأنه يركز على التقنيات الأخفض مستوى التي تجعل ز4 
يؤدي عمله على كمل وجه. 
إن هزه بنية تطبيقات فتية وقد دعت مقالة 6:٠۲‏ في ختامها إلى ما يلي : 
"إن التحديات الكبرى في إنشاء تطبيقات ×هز4 ليست تقنية إذ أن تقنيات ×هز4 الجوهرية ناضجة 
ومستقرة ومفهومة بشكل جيد. بل إن التحديات التي تواجه مصممي هذه التطبيقات هي ق 
نسيان ما نعرفه عن قيود الويب والبدء بتخيل جال أوسع من الإمكانيات'. 
سک ن لامر ى باقعا 


1 مال على ×هزA‏ 

إن أمثلة ٠ءء٠4٠۸‏ ۷1× التي عرضناها حتى الآن في هذا الفصل كانت مرد توابع خدمية توضح 
كيفية استخدا |نئغرض XMLHttpRequest‏ وهي لم توضح السبب الذي قد يدفعك إلى استخدام هذا 
الغرض أو حتى ما يمكنك أن تفعل به. تفتح البيكلية ×هز4 الباب أمام العديد من الإمكانيات التي 
سنبداً باستكشافها معاً. إن الخال yT‏ 


إن R۲٣٥‏ اختصار لاستدعاء الطريقة البعيدة Procedure Call‏ 0صظ وهي إستراتيجية تُستخدم في الجوسبة الموزعة 


لتسهيل الاتصال بين الزبون والملقم. 
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إن المثال 20-8 عبارة عن برنامج نصي مغمور يسجل معال جات الأحداث على ارتباطات في المستند 
بحيث تعرض هذه الارتباطات تلميحات شاشة عندما بحرك المستخدم الفأرة عليها. يستخدم هذا 
البرنامج الغرض ٠٩»‏ ۸م٤٤X1۴1×‏ لتنفيذ ا ۵59 1۲۲۲ مع الارتباطات التي تشير إلى الملقم 
نفسه الذي جرى منه تحميل المستند. واستنادا إلى الترويسات المعادة» يستخلص البرنامج النصي نوع 
ا محتوى وحجم وتاريخ تعديل المستند المرتبط ويعرض هذه المعلومات قي تلميح الشاشة (لاحظ الشكل 
1-). وهكذا نجد أن تلميح الشاشة يعرض فكرة عامة عن وجهة الارتباط ويمكنه أن يساعد 
الملستخدم على تقرير فيما إذا كان سينقر على هذا الارتباط أم لا. 


I ۹ morillarirex 


File Edl View Go Bookmaks Tools Help 


- ا @ ل - ضف‎ [ Go 


This Ajax tooltips example uses the following files: 


. | URL: http iwe. thetestsite.comîeslinkdetails.js 


Type: applicallon/x-javaseript 

: Size: 3208 

* NitpİS Date: Wed, 12 Jul 2006 21:15:19 GMT 
e tooltip. 

e shadow.png 


الشكل 20-1 تلميح شاشة باستخدام ×ةزة. 


يستند هذا الكود على الصف من#اهه۲ الذي طورناه في المثال 4 (بيد أنه لا يحتاج إلى امتداد هذا 
الصف الذي طورناه في المثال 17-3). يستخدم هذا الخال أيضا الوحدة النمطية رءءههء6 من المثال 14-2 
والتابع الخدمي 4۵۲۲0ء۲۴1٤ع.1۲۲۶‏ من الخال 20-4. يستخدم هذا المثال عدة طبقات من اللاتزامن 
وذلك في صيغة معام الحدث 4هها«ه ومعالج الحدث ٣٠«هءوuه‏ ص٠‏ ومؤقت وتابع إعادة الاستدعاء 
للغرض ۲ءء »٩٠۴م٠٤M111×‏ لذا فإنه بجوي توابع معششة عميقا. 


المتال 20-8 تلميحات شاشة باستخدام ×هزA.‏ 


/** 


* linkdetails.js 


This unobtrusive JavaScript module adds event handlers to links in a 
document so that they display tool tips when the mouse hovers over them for 
half a second. If the link points to a document on the same server as 

the source document, the tool tip includes type, size, and date 
information obtained with an XMLHttpRequest HEAD request. 


HHH XX 
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* This module requires the Tooltip.js, HTTP.js, and Geometry. js modules 
7 
(function() { // Anonymous function to hold all our symbols 

// Create the tool tip object we'll use 

var tooltip = new Tooltip (); 


// Arrange to have the init () function called on document load 
if (window.addEventListener) window.addEventListener ("load", init, false); 


else if (window.attachEvent) window.attachEvent ("onload", init); 


// To be called when the document loads 


function init () { 
var links = document.getElementsByTagName ('a'); 
// Loop through all the links, adding event handlers to them 
for (var i = 0; i < links.length; i++) 


if (links[i].href) addTooltipToLink (links [i]); 
} 


// This is the function that adds event handlers 
function addTooltipToLink (link) { 
// Add event handlers 
if (link.addEventListener) { // Standard technique 
link.addEventListener ("mouseover", mouseover, false); 
link.addEventListener ("mouseout", mouseout, false); 


1 

else if (link.attachEvent) { // IE-specific technique 
link.attachEvent ("onmouseover", mouseover) ; 
link.attachEvent ("onmouseout", mouseout) ; 


} 
var timer; // Used with setTimeout/clearTimeout 


function mouseover (event) { 


var e = event || window.event; 
// Get mouse position, convert to document coordinates, add offset 
Var x = e.clientX + Geometry.getHorizontalScroll() + 25; 


var YY = e.clientY¥ + Geometry.getVerticalScroll() + 15; 


// If a tool tip is pending, cancel it 
if (timer) window.clearTimeout (timer) ; 


// Schedule a tool tip to appear in half a second 
timer = window.setTimeout (showTooltip, 500); 


function showTooltip() { 

// If it is an HTTP link, and if it is from the same host 

// as this script is, we can use XMLHttpRequest 

// to get more information about it. 

if (link.protocol == "http:" && link.host == location.host) { 
// Make an XMLHttpRequest for the headers of the link 
HTTP.getHeaders (link.href, function (headers) { 

// Use the headers to build a string of text 


VAR JEIB: 3 TORE TE. IERAK. HEEL FF TEESE 
"Type: " + headers ["Content-Type"] + "<br>" + 
"Size: " + headers["Content-Length"] + "<br>" + 
"Date: " + headers ["Last-Modified"]; 


// And display it as a tool tip 
EOOEEILPD:SROWN (ELB Ky YI 
J); 
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} 
else { 
// Otherwise, if it is an off-site link, the 
// tool tip is just the URL of the link 
EOOLELDMSBOW CURES YT HE LERKSBHEEE RP. 
i 
function mouseout (e) { 
// When the mouse leaves a link, clear any 
// pending tool tips or hide it if it is shown 
if (timer) window.clearTimeout (timer) ; 


timer = null; 
tooltip.hide (); 


J) 07; 


(Single-Page Applications) ŠÖ~>اIgll تطبيقات الصف‎ 12 


إن تطبيق الصفحة الواحدة» وكما يدل اسمه» هو تطبيق ويب مقاد ا JScript‏ یتطلب 
تحميل صفحة واحدة فقط. إن بعض تطبيقات الصفحة الواحدة لا تحتاج مطلقا للتخاطب مع الاقم 
ما أن یتم تحميلها. ومن الأمثلة عليها نذكر ألعاب 1 التي تؤدي فيها التفاعلات مع المستخدم 
إلى تعديلات ف الحمل. 

يفتح الغرض +٠ء»۹٠۸م٠111×‏ والميكلية ×مز4 الباب واسعاً أمام العديد من الإمكانيات ويمكن 
لتطبيقات الويب استخدام هذه التقنيات لتبادل البيانات مع الملقم مع ا بھویتها کتطبيقات 
صفحة واحدة. يمكن لتطبيق الويب المصمم بهذه الطريقة أن بجوي مقدارا صغيرا من كود بدء الإقلاع 
المكتوب باستخدام ٢مءء؟ه«ه[‏ إضافة إلى نافذة ءهام؟ بسيطة تُعرض أثناء تهيئة التطبيق. ما أن يتم 
عرض النافذة یهام يمكن لكود بدء الإقلاع أن يستخدم الغرض ۲ءء»و٠۸ما٤٩M1×‏ لتنزيل كود 
JavaScript‏ الفعلي للتطبيق الذي سينفذ فیما بعد باستخدام الطريقة (1هءء. بعدها یستلم کود 
اveripهل‏ زمام المبادرة محملا البيانات حسب الحاجة باستخدام XMLHttpRequest‏ ومستخدما 
ا لتشکیل هذه البیانات ک 11۸۷1( تعرض للمستخدم. 


3 البرمجة النصية اlلبzيدŠ (Remote Scripting)‏ 
سبق مصطلح البرجة النصية البعيدة في تاريخ ظهوره المصطلح ×هز۸ بحوالي أربع سنوات وهو ببساطة 
اسم أقل جاذبية للفكرة نفسها أي استخدام 1١۲۶‏ المبرجة نصيا لإنشاء تداخل أكثر قوة (ووقت 
استجابة أفضل) ب بين الزبون والملقم. لقد شرحت إحدى المقالات ذائعة الصيت من ام4 قي العام 
2 كيفية استخدام العلامة <عصهءن> لإنشاء طلبات 11١۴‏ مبرمجة س إلى ملقم الويب (راجع 
ilرliط .)http://developer.apple.com/internet/webcontent/iframe.html‏ تشير هذه المقالة إلى انه إذا 
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أرسل ملقم الويب ملف HTML‏ م علامات <امpناءء>‏ فيه› فان کود JavaScript‏ الحتوى ق هذه 
العلامات ينفذ باستخدام المستعرض ويكنه استدعاء طرق معرفة في النافذة التي تحوي العلامة 
٠ <iframe>‏ مکن للملقم بهذه الطريقة يقة إرسال أوامر مباشرة إلى زبونه بصيغه ة تعليمات „JavaScript‏ 


4 تحدیرات من ×هز۸ 


تعاني الہيكلية Ajax‏ « حالہا حال أية هيكلية أخرى» من بعض مواطن الخلل. . يشرح هذا المقطع 
مواطن الخلل هذه کي تکون حذرا منها لدی تصميمك لتطبیقات ×ز۸. 

إن أول مواطن الخلل هو التغذية الخلفية المرئية . فعندما ينقر المستخدم على ارتباط ڌ د تشعبي تقليدي فان 
e‏ تغذية خلفية للدلالة أن هذا E‏ قید اجلب. وهذه 
ف e‏ تنفيذ طلبه. 8 أية E‏ عند تنفيذ ا HTIP‏ ا XMLHttpRequest‏ فان 
المستعرض لا يقدم أية تغذية خلفية. یتسبب کمون الشبكة Network Latency‏ حتى ق الاتصالات 
عالية السرعة بتأخير ملحوظ بین تنفیذ طلب 11۲۶ واستقبال الاستجابة على هذا الطلب. لذا 
السبب» من المهم في تطبيقات هن4 تأمين نوع من التغذية الخلفية المرئية (كتحريك 011۸1 بسيط. 
راجع الفصل 16( أثناء انتظار استجابة على .XMLHttpRequest‏ 

لاحظ أن المثال 20-8 لا يكترث لذه النصيحة في تأمين تغذية خلفية مرئية. والسبب هو أن المستخدم 
gE E E E REESE EA RS‏ 
ارتباط تشعبی ي. إن المستخدم لا يطلب من التطبيق صراحة أن يقوم بأي عمل لذا فإنه لا يتوقع أي 
خا ا2 

أما ثانی مواطن الخلل التى تعانى منها ز4 فهو متعلق ب 0۸1s‏ إذ أن تطبيقات الويب التقليدية تنتقل 
من حالة إلى الحالة التالية بتحميل صفحات جديدة ولكل صفحة محدد موقع معلومات فريد. إن هذا 
لا يصح مع تطبیقات ×۸ لأن 1۸1 فی شريط الموضع لا یتغیر عندما يستخدم تطبیق ×هز۸ برمجة ۸11۲۴ 
yT EE‏ 
إن موطن e‏ هذا وحلوله موضحة ق تطبیق خرائط .(http://local.google.com) Google‏ |ذ ينقل کم 
كبير من البيانات بين الزبون والملقم لدى تكبير وتمرير الخريطة لكن 0۸1 المعروض في المستعرض لا 
يتغیر على e‏ لقد حلت مءاعمميB‏ هذه المشكلة بتصمين "link to this page"‏ على کل 
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باستخدام هذا ال 0۸1. وما أن تتم إعادة التحميل › يمكننا وضع إشارة مرجعية على حالة الخريطة أو 
هو أنه من المفيد أن يكونوا قادرين على تغليف حالة التطبيق في 0۸1 وأن ء0۸1 هذه يجب أن تكون 
متاحة للمستخدمين عند الضرورة. 

إن موطن الخلل الثالث ق Ajax‏ يتعلق بالزر .Back‏ فالبرامج النصية التي تستخدم XMLHttpRequest‏ 
تتجاوز ميكانيكية تاريخ الستعرض وذلك بالتحکم ب ٨1١۶‏ بشكل مستقل عن هذا الملستعرض. إن 
المستخدمين معتادون على الإججار ق الويب باستخدام الزرين .Forward gy Back‏ | استخدم تطبیق 
ز۸ برمجة 1۲۲۶ النصية لعرض أجزاء أساسية من الحتوى الجديد وحاول المستخدمون استخدام 
هذين الزرين للاججار ص ضمن التطبيق » فسيجدون أن الزر Bak‏ يخرچ اک و ای ب م 
عرض جزء الحتوى الذي عرض مؤخرا! 

جرى القيام بالعديد من المحاولات لجل مشكلة الزر ack‏ وذلك بخداع المستعرض ودفعه إلى خر 
5 في تاریخه. لکن هذه التقنيات تستخدم كودا خصصا للمستعرض وهي ر . وحتی 
عندما تعمل بشکل جید» فانها تخرب نموذج Ajax‏ وذلك بدفع الملستخدم إلى الإججار بإاعادة تحميل 
الصفحات بدلا من الاعتماد على H۲۲۶‏ الا ب 

برأيي أن مشكلة الزر ء8 غير خطرة على الإطلاق ويمكن تقليلها بالتصميم المدروس للويب. إن 
عناصر التطبيق التى تبدو كارتباطات تشعبية بجحب أن تسلك سلوك ارتباطات تشعبية كما يجب أن 
تقوم بإعادة تحميل حقيقي للصفحة. الأمر الذي يجعلها خاضعة لميكانيكية تاريخ المستعرض وهو ما 
يتوقعه المستخدم. وعلى العكس من ذلك فإن عناصر التطبيق التي تعتمد على 1۲۲۶ المبرجة نصيا 
وغير الخاضعة لميكانيكية تاريخ المستعرض »› يجب ألا تبدو كارتباطات تشعبية. تأمل تطبيق خرائط 
6 مرة أخرى. عندما ينقر المستخدم بالفأرة ورك للتمرير في الخريطة فهو لا يتوقع أن يقوم الزر 
Back‏ بالغاء هذا التمرير. 

جب تجنب استخدام کلمات مثل "back" gy "forward"‏ ق عناصر التحكم بالإججار ضمن تطبيقات 
.Ajax‏ إذا استخدم التطبيق واجهة شبيهة بالمعاج تحوي زرین Previous gy Next‏ « على سبیل المغال» 
فيجب أن يستخدم هذا التطبيق تحميل الصفحة التقليدي (بدلا من اءuء۴م؛؛M1۴*)‏ لعرض 
الشاشة التالية أو الشاشة السابقة لأن المستخدم يتوقع في هذه الحالة أن يعمل الزر »ء8 في المستعرض 
بنفس طريقة عمل الزر Previous‏ ق التطبيق. 

يجب عدم الخلط بين الزر )ء84 ق المستعرض والميزة Undo‏ ق التطبيق إذ بمكن لتطبيقات هز أن 
تضصمن الخيارات undo/redo‏ اخخاصة بها إذا کان هذا e.‏ للمستخدم» > لکن جب تذکر أن هذا 
يختلف عما يقدمه الزران .Forward gy Back‏ 
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4 برمجة 1۲۲۶ نصیا باستخدام العلامات <اماc>‏ 

إن الغرض ues‏ tpR٤اX×M‏ هو غرض ActiveX‏ ت 5 nternet Explorer‏ و 6. يعطل المستخدمون 
أحياناً برجة ×ع«ناء4 النصية في ۲ءام×8 ٠٠«مء٠«1‏ لأسباب أمنية وفي هذه الحالة تكون البرامج النصية 
عاجزة عن إنشاء غرض ١ء٠٠ .×M1۴1٤٤۸٠٩‏ يمكن عند الضرورة تنفیذ طلبات 6۴۲ 1۲۲۴ باستخدام 
العلامتين <امنءءء> و <صهء#ن>. على الرغم من أن إعادة تضمين كل وظيغة tءعu٠۸م!٤M1۴×‏ بهذه 
الطريقة غير ممكن ٴ٠‏ فمن الممكن إنشاء نسخة من التابع الخدمي ۸۲0٥۰۲۲ع.۲۴١1‏ تعمل بدون برمجة 
Active×‏ النصية. 

بمكننا توليد طلبات 111۶ بسهولة وذلك بضبط الخاصية ءءء للعلامة <امنعءء> أو <عمصهءة>. إن ما 
بخدع أكثر هو استخلاص البيانات التي تريدها من تلك العناصر دون أن يعدل المستعرض هذه 
البيانات. تتوقع العلامة <عصهءگ> تحميل مستند 11٧1‏ فیها وإذا حاولت تنزیل عحتوی ملف نصي 
بسیط فی <۳> فستجد أن نصك يحول إلى 11×1. زد على ذلك Internet Explorer ıi ضaڊ ùÎ‏ 
لا تضمن وبشكل مناسب المعالح onload‏ أو ا معام onreadystatechange‏ للعلامات <eصfrن>‏ الأمر 
الذي يصعب العمل أكثر. 

تستخدم المقاربة المعروضة هنا العلامة امنءء> وبرنامج نصي على طرف الملقم. حيث غخبر البرنامج 
النصي على طرف ال ملقم ب 0۸1 الذي نريد محتواه وبالتابع على طرف الزبون الذي يجب أن يمرر له 
امحتوى. يجلب البرنامج النصي على طرف ال ملقم محتويات 1۸1 المرغوب ويرمزها كسلسلة حرفية في 
اء« (قد تكون طويلة)» ويعيد برنامج نصي على طرف الزبون يمرر هذه السلسلة المحرفية إلى 
التابع امحدد. وبا أن البرنامج النصي على طرف الزبون يحمل في علامة <امنعءء> فإن التابع المحدد 
يستدعى أوتوماتيكيا على عتويات 0۸1 عند اكتمال عملية التنزيل. 


نرى في المخال 20-9 تضمينا لبرنامج نصي مناسب على طرف ال ملقم بلغة البرمجة النصية ۲۴۲. 
المٿال 20-9 .jsquoter.php‏ 


<?php 

// Tell the browser that we're sending a script 
header ("Content-Type: text/javascript"); 

// Get arguments from the URL 


ŞE URE. 3u SL GET ETEURE™T // The function to invoke in our js code 
$filename = $_GET["url"]; // The file or URL to pass to the func 
Ş$lines = file($filename); // Get the lines of the file 
$text = implode ("", Slines); // Concatenate into a string 
// Escape quotes and newlines 
Ş$escaped = str_replace (array ("'", "\"", "\n", "\r"), 

EFA (CT NETE ANNA NET INET; 

$text); 


قد یتطلب البديل الكامل XMLHttpRequest‏ استخدام بر يمج .Java‏ 
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// Output everything as a single JavaScript function call 
echo "$func ('$escaped');" 
2> 


یستخدم التابع على طرف الزبون ق المغال 20-10 البرنامج النصي على طرف الملقم jsquoter.php‏ ق 
المغال 20-9 ويعمل بشكل مشابه للتابع [1P .getex0)‏ الوارد قي المثال 20-2. 


المثال 20-10 التابع الخدaمي .HTTP.getTextWithScript()‏ 


HTTP.getTextWithScript = function (url, callback) { 
// Create a new script element and add it to the document. 
var script = document.createElement ("script"); 
document .body.appendChild (script); 


// Get a unique function name. 
var funcname = "func" + HTTP.getTextWithScript.countert+t; 


// Define a function with that name, using this function as a 
// convenient namespace. The script generated on the server 
// invokes this function. 
HTTP.getTextWithScript [funcname] = function (text) { 

// Pass the text to the callback function 

callback (text); 


// Clean up the script tag and the generated function. 
document .body.removeChild (script) ; 
delete HTTP.getTextWithScript [funcname] ; 

} 


// Encode the URL we want to fetch and the name of the function 
// as arguments to the jsquoter.php server-side script. Set the src 
// property of the script tag to fetch the URL. 
SCEIPEA SEG =3 TH SGUOEEEBRBD™ F 
"?url=" + encodeURIComponent (url) + "&func=" + 
encodeURIComponent ("HTTP.getTextWithScript." + funcname) ; 
} 


// We use this to generate unique function callback names in case there 
// is more than one request pending at a time. 
HTTP.getTextWithScript.counter = 0; 


